<template>
  <div >
      <product-search></product-search>

      <!-- 这是下载产品列表 -->
      <div class="content-list content-box">
        <h6 class="title-h6">产品列表</h6>
        <div style="padding:15px;">
          <el-table :data="tableData" v-loading="loading" style="width: 100%" border  element-loading-text="拼命加载中..." :default-sort = "{prop: 'updated_at', order: 'descending'}">
          <el-table-column
            label="产品编码"
            width="100" show-overflow-tooltip prop="procode">
          </el-table-column>
          <el-table-column
            label="产品名称"
            width="100">
            <template slot-scope="scope">
              <span >{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="投放渠道"
            width="100">
            <template slot-scope="scope">
              <span >{{ scope.row.ways }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="后台链接"
            width="120">
            <template slot-scope="scope">
              <span >{{ scope.row.admin_url }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="账号密码"
            width="100">
            <template slot-scope="scope">
              <span >{{ scope.row.account_and_password }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="付费方式"
            width="180">
            <template slot-scope="scope">
              <span >{{ scope.row.price }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="合同编号"
            width="180" prop="contract" show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            label="产品状态"
            width="80" :formatter = formatProstatus prop="status">
          </el-table-column>
          <el-table-column
            label="合同状态"
            width="80" :formatter="formatContractstatus" prop="contractstatus">
          </el-table-column>
          <el-table-column
            label="物料状态"
            width="80" :formatter = 'formatMaterialstatus' prop="materialstatus">
          </el-table-column>
          <el-table-column label="操作" class-name="operation">
            <template slot-scope="scope" >
              <router-link :to="{ name: 'editor', params: { proId: scope.row.id }}">编辑</router-link>
              <router-link :to="{ name: 'proinfo', params: { proId: scope.row.id }}">查看</router-link>
              <el-button type="text" @click="offLine()" v-show="scope.row.status === 1">下线</el-button>
              <router-link :to="{name: 'prolink', params: { proId: 1 }}">产品包管理</router-link>
              <router-link v-if="scope.row.materialstatus === '0' && scope.row.ways === '下载器'" :to="{ path: '/pcproduct/material', query:{id:1}}">设置物料</router-link>
              <router-link :to="{name: 'operationrecord', params: { proId: 2 }}">查看操作记录</router-link>
            </template>
          </el-table-column>
          </el-table>
        </div>
        <div style="padding: 20px 0">
          <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="reqBody.page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="reqBody.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400" background>
    </el-pagination>
        </div>
      </div>
  </div>

</template>
<script>

import  ProductSearch  from '@/components/Product/ProductSearch'
import {ProductUrl, getHeader } from '@/config/config'
import axios from 'axios'
export default {
  name: 'DownloadList',
  components: {
     ProductSearch 
  },
  data() {
    return {
      tableData: [{
          procode: 'P2018031501',
          name: '爱奇艺',
          ways:'-',
          system: 'http:u.com',
          password: '456',
          price: '-',
          contract: 'BJ-SR-KJ-20150731-02',
          prostatus: '1',
          contractstatus: '1',
          materialstatus: '-',
        }, {
          procode: '-',
          name: '爱奇艺',
          ways:'下载器',
          system: '-',
          password: '-',
          price: '-',
          contract: '-',
          prostatus: '1',
          contractstatus: '-',
          materialstatus: '0',
        }, {
          procode: '-',
          name: '爱奇艺',
          ways:'收藏夹',
          system: '-',
          password: '-',
          price: '-',
          contract: '-',
          prostatus: '-',
          contractstatus: '-',
          materialstatus: '-',
        }, {
          procode: '-',
          name: '爱奇艺',
          ways:'外放',
          system: '-',
          password: '-',
          price: '-',
          contract: '-',
          prostatus: '-',
          contractstatus: '-',
          materialstatus: '-',
        }],
      loading: true,
      currentPage4: 1,
      reqBody: {
        page: 1,
        limit: 10
      },
      dataTotal: null 
    }
  },
  created() {
    setTimeout(() => {
        this.getData()
    },10)
  },
  methods: {
    formatProstatus(row, column) {
      if(row.status === 1) {
        return '启用'
      }else {
        return '下线'
      }
    },
    formatContractstatus(row, column) {
      if(row.contractstatus === '1') {
        return '已完成'
      }else if(row.contractstatus === '0') {
        return '签署中'
      }else {
        return '其他'
      }
    },
    formatMaterialstatus(row, column) {
      if(row.materialstatus === '1') {
        return '已设置'
      }else if(row.materialstatus === '0'){
        return '未设置'
      }else {
        return row.materialstatus
      }
    },
    offLine() { //下线
      this.$prompt('请输入备注信息', '提示', {
          confirmButtonText: '确定',
          inputType: 'textarea',
          inputPlaceholder: '请输入备注信息',
          closeOnClickModal: false,
          showCancelButton: false,
          inputValidator: function(value) {
            console.log(value);
            if(value == null) {
              return false
            }
          }	
        }).then(({ value }) => {
          // this.$message({
          //   type: 'success',
          //   message: '你的邮箱是: ' + value
          // });
        }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '取消输入'
          // });       
        });
    },
    // 获得数据
    getData() {
      let _this = this
      axios.get(ProductUrl, { headers: getHeader(), params: this.reqBody})
      .then(response => {
        if(response.status === 200 & response.data.success) {
          _this.loading = false
          _this.tableData = response.data.data.data
          console.log(this.tableData)
          _this.dataTotal = response.data.total
        }
      })
    },
    handleSizeChange(size) {
      this.reqBody.limit = size
      this.getData()
      scroll(0, 0) 
      console.log(`每页 ${size} 条`);
    },
    handleCurrentChange(size) {
      this.reqBody.page = size
      this.getData()
      scroll(0, 0)  
    }
  }
}
</script>
<style>
.content-list {
  margin-top: 10px;
}
.el-table th {
  text-align: center;
}
.operation a {
  color: #666
}
</style>


